<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>CSS实现RatingBar效果</title>
<style type="text/css">
ul{margin:0;padding:0;}
ul.rating{position:relative;width:150px;height:30px;background:url("http://dota.uuu9.com/v/skin20110425/star/star3.png") repeat-x;}
ul.rating.abled:hover li.result{display:none;}
ul.rating li{position:absolute;height:30px;left:0;top:0;}
ul.rating li.result{background:url("http://dota.uuu9.com/v/skin20110425/star/star3.png") 0 -30px repeat-x;}
ul.rating.abled li:hover{background:url("http://dota.uuu9.com/v/skin20110425/star/star3.png") 0 -60px repeat-x;cursor:pointer;}
</style>
</head>
<body>
<ul class="rating abled">        <!-- 如果不允许评价了，就去掉class类：abled -->
        <li style="width:110px;z-index:6;" class="result"></li>        <!-- 这是当前评分结果，宽度值由程序输出 -->
        <li style="width:30px;z-index:5;"></li>
        <li style="width:60px;z-index:4;"></li>
        <li style="width:90px;z-index:3;"></li>
        <li style="width:120px;z-index:2;"></li>
        <li style="width:150px;z-index:1;"></li>
</ul>
</body>
</html>